import './index.css';
import React, { useState } from 'react';
import { Link } from 'umi';
import { Layout, Menu,Popconfirm } from 'antd';
import logo from '../../public/img/logo.png'
import Logion from '@/pages/logion/index'

const { SubMenu } = Menu
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
} from '@ant-design/icons';

const { Header, Sider, Content } = Layout;
function BasicLayout(props) {
  console.log(props);
  const isLogin = sessionStorage.getItem('isLogin');
  console.log(isLogin);
  

  if(isLogin==='false'||isLogin===null){
    return (<Logion {...props}>{props.children}</Logion>)
  }else{
    const [collapsed, setcollapsed] = useState(false);
    let [flag,setflag] = useState(false)
   const toggle = () => {
     if(collapsed){
      setcollapsed(false)
     }else{
      setcollapsed(true)
     }
    };

    const logout = ()=>{
      console.log('点击了退出');

      sessionStorage.setItem('isLogin','false');
      props.history.push('/logion')
    }
    const renderNav = ()=> {
    return  props.route.routes.map(ele=>(
      ele.name?       
        <Menu.Item key={ele.id} icon=''>
          <Link to={ele.path}>{ele.name}</Link>
        </Menu.Item>
        :null

      ))
    }
  return (
    <Layout>
    <Sider trigger={null} collapsible collapsed={collapsed}>
      <div className="logo" onClick={()=>{setflag(!flag)}}><img src={logo}/>              
            {
              flag?            
              <div className='logout'>
                <span onClick={()=>{logout()}}>退出登陆</span>
                {/* <Popconfirm title="你确定要退出吗?" onConfirm={logout}>
                  <span>退出登陆</span>
                </Popconfirm> */}

              </div>
              :<></>
              }
      </div>
      <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']} >
                  {renderNav()}
      </Menu>
    </Sider>
    <Layout className="site-layout">
      <Header className="site-layout-background" style={{ padding: 0 }}>
        {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
          className: 'trigger',
          onClick: toggle,
        })}
      </Header>
      <Content
        className="site-layout-background"
        style={{
          margin: '24px 16px',
          padding: 24,
          minHeight: 280,
        }}
      >
        {props.children}
      </Content>
    </Layout>
  </Layout>
  );
    
  }
  

}

export default BasicLayout;

